<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="<c:url value="/css/style.css" />" rel="stylesheet"
	type="text/css" media="screen" />
<title>Insert title here</title>
<style>
#div1 {
	width: 350px;
	margin: 0 auto;
}

#img1 {
	display: none;
}

span {
	color: red;
}
</style>
<script>
	var xmlHttp;
	
	window.addEventListener("load", init, false);
	function init() {
		var accounttxt = document.getElementById("mbaccount");		
		accounttxt.addEventListener("blur", check, false);
	}
	
	window.onload = function() {
		document.getElementById("mbpassword").onblur = mbpasswordBlur;
		document.getElementById("mbidentity").onblur = mbidentityBlur;
		document.getElementById("checkpassword").onblur = checkpasswordBlur;
		document.getElementById("mbname").onblur = mbnameBlur;
		document.getElementById("mbnick").onblur = mbnickBlur;
		document.getElementById("mbemail").onblur = mbemailBlur;
		document.getElementById("mbtel").onblur = mbtelBlur;
		document.getElementById("mbaddr").onblur = mbaddrBlur;
		
	
	}
	
  function mbaddrBlur(){
		
		var mbaddrVal = document.getElementById("mbaddr").value;
		
		var re = /[\u4E00-\u9fa5-\u0041-\u005A\u0061-\u007A]/;
		
		if (!(re.test(mbaddrVal))) {
			document.getElementById("span9").innerHTML = "<img src='../images/x.jpg' /> " + "格式不正確";
		}else {
			document.getElementById("span9").innerHTML =  "<img src='../images/o.jpg' /> " + "輸入成功";
		}
		
	}
	
  function mbtelBlur(){
		
		var mbtelVal = document.getElementById("mbtel").value;
		
		var re = /[0-9]/;
		
		if (re.test(mbtelVal) && mbtelVal.length >= 8) {
			document.getElementById("span8").innerHTML =  "<img src='../images/o.jpg' /> " + "輸入成功";
			
		}else {
			document.getElementById("span8").innerHTML = "<img src='../images/x.jpg' /> " + "請輸入數字";
		}
		
	}
	
  function mbemailBlur(){
		
		var mbemailVal = document.getElementById("mbemail").value;
		
		var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
		
		if (!(re.test(mbemailVal))) {
			document.getElementById("span7").innerHTML = "<img src='../images/x.jpg' /> " + "格式不正確";
		}else {
			document.getElementById("span7").innerHTML =  "<img src='../images/o.jpg' /> " + "輸入成功";
		}
		
	}
	
  function mbnickBlur(){
		
		var mbnickVal = document.getElementById("mbnick").value;
		
		
		
		if (mbnickVal.length >= 1 ) {
			document.getElementById("span6").innerHTML =  "<img src='../images/o.jpg' /> " + "輸入成功";
		}else {
			document.getElementById("span6").innerHTML = "<img src='../images/x.jpg' /> " + "格式不正確";
		}
		
	}
	
	function mbnameBlur(){
		
		var mbnameVal = document.getElementById("mbname").value;
		
		var re = /^[\u4E00-\u9fa5]*$/;
		if (!(re.test(mbnameVal)) || !(mbnameVal.length >= 2 )) {
			document.getElementById("span5").innerHTML = "<img src='../images/x.jpg' /> " + "請輸入中文姓名";
		}else {
			document.getElementById("span5").innerHTML =  "<img src='../images/o.jpg' /> " + "輸入成功";
		}
		
	}
	
	function mbidentityBlur(){
		
		var mbidentityVal = document.getElementById("mbidentity").value;
			
		var re = /[A-Z]{1}[1-2]{1}\d{8}/;
		
		if (!re.test(mbidentityVal)) {
			document.getElementById("span4").innerHTML = "<img src='../images/x.jpg' /> " + "格式不正確";
		}else {
			document.getElementById("span4").innerHTML =  "<img src='../images/o.jpg' /> " + "輸入成功";
		}
		
	}
	
	function mbpasswordBlur(){
		
		var mbpasswordVal = document.getElementById("mbpassword").value;
		
		var re = /^[A-Za-z0-9]*$/;
		
		if (!(re.test(mbpasswordVal)) || mbpasswordVal.length < 6) {
			//window.alert("密碼至少6個字");
			document.getElementById("span2").innerHTML = "<img src='../images/x.jpg' /> " + " 密碼至少6個字 不可以輸入空白";
		} else {
			//window.alert("輸入成功");
			document.getElementById("span2").innerHTML = "<img src='../images/o.jpg' /> " + " 輸入成功";

		}
		
	}
	
	function checkpasswordBlur(){
		
		var mbpasswordVal = document.getElementById("mbpassword").value;
		var checkpasswordVal = document.getElementById("checkpassword").value;
		
		
		if (checkpasswordVal != mbpasswordVal || mbpasswordVal.length < 6) {
			
			document.getElementById("span3").innerHTML = "<img src='../images/x.jpg' /> " + " 密碼不同";
		} else {
			//window.alert("輸入成功");
			document.getElementById("span3").innerHTML = "<img src='../images/o.jpg' /> " + " 輸入成功";

		}
		
	}
	
	
	function check() {
		xmlHttp = new XMLHttpRequest();

		if (xmlHttp != null) {
			//步驟二對Server端發出要求
			xmlHttp.onreadystatechange = returnData;
			var strUrl = "AccountCheck.jsp?mbaccount=" + this.value;
			xmlHttp.open("post", strUrl, true);
			xmlHttp.send(null);
			document.getElementById("img1").style.display = "inline";
		} else {
			alert("您的瀏覽器不支援Ajax功能");
		}
	}
	
	function returnData() {
		//步驟三接收Server端回應的資料
		if (xmlHttp.readyState == 4) {
			document.getElementById("img1").style.display = "none";
			if (xmlHttp.status == 200) {
				var data = xmlHttp.responseText;

				//將接收的資料呈現在網頁上
				var theDiv = document.getElementById("span1");
				theDiv.innerHTML = data;
			}
		}
	}
	
</script>
</head>

<body>
	<!-- 引入共同的頁首 -->
	<c:set var="funcName" value="IND" scope="session" />
	<jsp:include page="/top/top.jsp" />

	<!-- 從這裡開始寫 -->
	<center>
		<h1>會員註冊</h1>
	</center>

	<center>
		<form action="<c:url value="/member/Register" />" method="post"
			enctype="multipart/form-data">
			<table>

				<tr>
					<td bgcolor="#F1F1F1">帳號:</td>
					<td bgcolor="#F1F1F1"><input type="text" name="mbaccount"
						id="mbaccount" size="10" required maxlength="10"><img
						src="../images/01.gif" id="img1"> <span id="span1"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">密碼:</td>
					<td bgcolor="#F1F1F1"><input type="password" name="mbpassword"
						id="mbpassword" size="15" required maxlength="15"><span
						id="span2"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">密碼確認:</td>
					<td bgcolor="#F1F1F1"><input type="password"
						name="checkpassword" id="checkpassword" size="15" required
						maxlength="15"><span id="span3"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">姓名:</td>
					<td bgcolor="#F1F1F1"><input type="text" name="mbname"
						id="mbname" size="10" required maxlength="5"><span
						id="span5"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">性別:</td>
					<td><input type="radio" name="mbsex" value="男" checked>男<input
						type="radio" name="mbsex" value="女">女</td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">身分證字號:</td>
					<td bgcolor="#F1F1F1"><input type="text" name="mbidentity"
						id="mbidentity" size="10" required maxlength="10"><span
						id="span4"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">生日:</td>
					<td bgcolor="#F1F1F1"><input type="date" name="mbbirth"
						size="12" required maxlength="12" /></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">E-mail:</td>
					<td><input type="email" required name="mbemail" id="mbemail"
						size="25" maxlength="25"><span
						id="span7"></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">電話:</td>
					<td bgcolor="#F1F1F1"><input name="mbtel" type="text"
						id="mbtel" size="15" required maxlength="15" /><span
						id="span8"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F1F1F1">地址:</td>
					<td bgcolor="#F1F1F1"><input name="mbaddr" type="text"
						id="mbaddr" size="35" required maxlength="35" /><span
						id="span9"></span></td>
				</tr>

				<tr>
					<td bgcolor="#F8F8F8">照片:</td>
					<td><input name="mbimg" type="file" size="40" align="center"></td>
				</tr>

				<tr>
					<td colspan="4" align="center" bgcolor="#F8F8F8"><input
						type="submit" name="name" value="確認" /> <input type="reset"
						name="cancel" value="取消" onclick="history.back(-1)" /></td>
				</tr>

			</table>
		</form>
	</center>

	<!-- 寫到這裡結束 -->

	<div id="footer-wrapper">
		<div id="footer">
			<p>
				Copyright (c) 2010 Sitename.com. All rights reserved. Design by <a
					href="http://www.freecsstemplates.org/" rel="nofollow">FCT</a>.
			</p>
		</div>
	</div>
</body>
</html>